<template>
  <div class="user-order">
    <!--标题 -->
    <div class="am-cf am-padding">
      <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">订单管理</strong> / <small>Order</small></div>
    </div>
    <hr/>
    <div class="am-tabs am-tabs-d2 am-margin" data-am-tabs>
      <template>
        <el-tabs v-model="activeName" @tab-click="handleClick" :stretch="true">
          <el-tab-pane label="所有订单" name="first">
            <div class="am-tabs-bd">
              <div class="am-tab-panel am-fade am-in am-active" id="tab1">
                <div class="order-top">
                  <div class="th th-item">
                    <td class="td-inner">商品</td>
                  </div>
                  <div class="th th-price">
                    <td class="td-inner">单价</td>
                  </div>
                  <div class="th th-number">
                    <td class="td-inner">数量</td>
                  </div>
                  <div class="th th-operation">
                    <td class="td-inner">商品操作</td>
                  </div>
                  <div class="th th-amount">
                    <td class="td-inner">合计</td>
                  </div>
                  <div class="th th-status">
                    <td class="td-inner">交易状态</td>
                  </div>
                  <div class="th th-change">
                    <td class="td-inner">交易操作</td>
                  </div>
                </div>

                <div class="order-main">
                  <div class="order-list">

                    <!--交易成功-->
                    <template v-for="order in orders">
                      <div class="order-status5">
                        <div class="order-title">
                          <div class="dd-num" style="max-width: 700px;width: 40%">订单编号：<a
                              href="javascript:;">{{ order.orderId }}</a></div>
                          <span>成交时间：{{ order.flishTime|dateFormat }}</span>
                          <!--    <em>店铺：小桔灯</em>-->
                        </div>
                        <div class="order-content">
                          <div class="order-left">
                            <template v-for="orderItem in order.orderItems">
                              <ul class="item-list">
                                <li class="td td-item">
                                  <div class="item-pic">
                                    <a href="#" class="J_MakePoint">
                                      <img :src="orderItem.productImg" class="itempic J_ItemImg">
                                    </a>
                                  </div>
                                  <div class="item-info">
                                    <div class="item-basic-info">
                                      <a href="#">
                                        <p>{{ orderItem.productName }}</p>
                                        <p class="info-little">{{ orderItem.skuName }}
                                          <!--<br/>包装：裸装--> </p>
                                      </a>
                                    </div>
                                  </div>
                                </li>
                                <li class="td td-price">
                                  <div class="item-price">
                                    {{ orderItem.productPrice }}
                                  </div>
                                </li>
                                <li class="td td-number">
                                  <div class="item-number">
                                    <span>×</span>{{ orderItem.buyCounts }}
                                  </div>
                                </li>
                                <li class="td td-operation">
                                  <div class="item-operation">
                                    <a href="javascript:void(0)" v-if="order.status==2">退款</a>
                                  </div>
                                </li>
                              </ul>
                            </template>
                          </div>
                          <div class="order-right">
                            <li class="td td-amount">
                              <div class="item-amount">
                                合计：{{ order.totalAmount }}
                                <p>含运费：<span>包邮</span></p>
                              </div>
                            </li>
                            <div class="move-right">
                              <li class="td td-status">
                                <div class="item-status">
                                  <!--订单状态 1:待付款 2:待发货 3:待收货 4:待评价 5:已完成 6:已关闭-->
                                  <!--交易成功-->
                                  <p class="Mystatus" v-if="order.status == 5">交易成功</p>
                                  <p class="Mystatus" v-if="order.status == 2">买家已付款</p>
                                  <p class="Mystatus" v-if="order.status == 3">卖家已发货</p>
                                  <p class="Mystatus" v-if="order.status == 1">等待买家付款</p>
                                  <p class="Mystatus" v-if="order.status == 1"><a href="javascript:void(0)">取消订单</a></p>
                                  <p class="order-info"><a href="orderinfo.html" v-if="order.status == 3">订单详情</a></p>
                                  <p class="order-info"><a href="javascript:void(0)" v-if="order.status == 3">查看物流</a>
                                  </p>
                                  <!--交易关闭-->
                                  <p class="Mystatus" v-if="order.status ==6">交易关闭</p>

                                </div>
                              </li>
                              <li class="td td-change">

                                <div class="am-btn am-btn-danger anniu" v-if="order.status ==1" @click="goPay(order)">
                                  一键支付
                                </div>
                                <div class="am-btn am-btn-danger anniu" v-if="order.status ==2">
                                  提醒发货
                                </div>
                                <div class="am-btn am-btn-danger anniu" v-if="order.status ==3">
                                  确认收货
                                </div>
                                <div class="am-btn am-btn-danger anniu" v-if="order.status ==4"
                                     @click="goComment(orders)">
                                  评价商品
                                </div>
                                <div class="am-btn am-btn-danger anniu" v-if="order.status==6" @click="delOrder(order)">
                                  删除订单
                                </div>

                              </li>
                            </div>
                          </div>
                        </div>
                      </div>
                    </template>
                  </div>

                </div>

              </div>
              <div class="am-tab-panel am-fade" id="tab2">

                <div class="order-top">
                  <div class="th th-item">
                    <td class="td-inner">商品</td>
                  </div>
                  <div class="th th-price">
                    <td class="td-inner">单价</td>
                  </div>
                  <div class="th th-number">
                    <td class="td-inner">数量</td>
                  </div>
                  <div class="th th-operation">
                    <td class="td-inner">商品操作</td>
                  </div>
                  <div class="th th-amount">
                    <td class="td-inner">合计</td>
                  </div>
                  <div class="th th-status">
                    <td class="td-inner">交易状态</td>
                  </div>
                  <div class="th th-change">
                    <td class="td-inner">交易操作</td>
                  </div>
                </div>

                <div class="order-main">
                  <div class="order-list">
                    <div class="order-status1">
                      <div class="order-title">
                        <div class="dd-num">订单编号：<a href="javascript:;">1601430</a></div>
                        <span>成交时间：2015-12-20</span>
                        <!--    <em>店铺：小桔灯</em>-->
                      </div>
                      <div class="order-content">
                        <div class="order-left">
                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/kouhong.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>美康粉黛醉美唇膏 持久保湿滋润防水不掉色</p>
                                    <p class="info-little">颜色：12#川南玛瑙
                                      <br/>包装：裸装 </p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">

                              </div>
                            </li>
                          </ul>

                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/62988.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>礼盒袜子女秋冬 纯棉袜加厚 韩国可爱 </p>
                                    <p class="info-little">颜色分类：李清照
                                      <br/>尺码：均码</p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">

                              </div>
                            </li>
                          </ul>

                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/kouhong.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>美康粉黛醉美唇膏 持久保湿滋润防水不掉色</p>
                                    <p class="info-little">颜色：12#川南玛瑙
                                      <br/>包装：裸装 </p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">

                              </div>
                            </li>
                          </ul>
                        </div>
                        <div class="order-right">
                          <li class="td td-amount">
                            <div class="item-amount">
                              合计：676.00
                              <p>含运费：<span>10.00</span></p>
                            </div>
                          </li>
                          <div class="move-right">
                            <li class="td td-status">
                              <div class="item-status">
                                <p class="Mystatus">等待买家付款</p>
                                <p class="order-info"><a href="#">取消订单</a></p>

                              </div>
                            </li>
                            <li class="td td-change">
                              <a href="pay.html">
                                <div class="am-btn am-btn-danger anniu" @click="goPay(order)">
                                  一键支付
                                </div>
                              </a>
                            </li>
                          </div>
                        </div>

                      </div>
                    </div>
                  </div>

                </div>
              </div>
              <div class="am-tab-panel am-fade" id="tab3">
                <div class="order-top">
                  <div class="th th-item">
                    <td class="td-inner">商品</td>
                  </div>
                  <div class="th th-price">
                    <td class="td-inner">单价</td>
                  </div>
                  <div class="th th-number">
                    <td class="td-inner">数量</td>
                  </div>
                  <div class="th th-operation">
                    <td class="td-inner">商品操作</td>
                  </div>
                  <div class="th th-amount">
                    <td class="td-inner">合计</td>
                  </div>
                  <div class="th th-status">
                    <td class="td-inner">交易状态</td>
                  </div>
                  <div class="th th-change">
                    <td class="td-inner">交易操作</td>
                  </div>
                </div>

                <div class="order-main">
                  <div class="order-list">
                    <div class="order-status2">
                      <div class="order-title">
                        <div class="dd-num">订单编号：<a href="javascript:;">1601430</a></div>
                        <span>成交时间：2015-12-20</span>
                        <!--    <em>店铺：小桔灯</em>-->
                      </div>
                      <div class="order-content">
                        <div class="order-left">
                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/kouhong.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>美康粉黛醉美唇膏 持久保湿滋润防水不掉色</p>
                                    <p class="info-little">颜色：12#川南玛瑙
                                      <br/>包装：裸装 </p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">
                                <a href="refund.html">退款</a>
                              </div>
                            </li>
                          </ul>

                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/62988.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>礼盒袜子女秋冬 纯棉袜加厚 韩国可爱 </p>
                                    <p class="info-little">颜色分类：李清照
                                      <br/>尺码：均码</p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">
                                <a href="refund.html">退款</a>
                              </div>
                            </li>
                          </ul>

                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/kouhong.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>美康粉黛醉美唇膏 持久保湿滋润防水不掉色</p>
                                    <p class="info-little">颜色：12#川南玛瑙
                                      <br/>包装：裸装 </p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">
                                <a href="refund.html">退款</a>
                              </div>
                            </li>
                          </ul>
                        </div>
                        <div class="order-right">
                          <li class="td td-amount">
                            <div class="item-amount">
                              合计：676.00
                              <p>含运费：<span>10.00</span></p>
                            </div>
                          </li>
                          <div class="move-right">
                            <li class="td td-status">
                              <div class="item-status">
                                <p class="Mystatus">买家已付款</p>
                                <p class="order-info"><a href="orderinfo.html">订单详情</a></p>
                              </div>
                            </li>
                            <li class="td td-change">
                              <div class="am-btn am-btn-danger anniu">
                                提醒发货
                              </div>
                            </li>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="am-tab-panel am-fade" id="tab4">
                <div class="order-top">
                  <div class="th th-item">
                    <td class="td-inner">商品</td>
                  </div>
                  <div class="th th-price">
                    <td class="td-inner">单价</td>
                  </div>
                  <div class="th th-number">
                    <td class="td-inner">数量</td>
                  </div>
                  <div class="th th-operation">
                    <td class="td-inner">商品操作</td>
                  </div>
                  <div class="th th-amount">
                    <td class="td-inner">合计</td>
                  </div>
                  <div class="th th-status">
                    <td class="td-inner">交易状态</td>
                  </div>
                  <div class="th th-change">
                    <td class="td-inner">交易操作</td>
                  </div>
                </div>

                <div class="order-main">
                  <div class="order-list">
                    <div class="order-status3">
                      <div class="order-title">
                        <div class="dd-num">订单编号：<a href="javascript:;">1601430</a></div>
                        <span>成交时间：2015-12-20</span>
                        <!--    <em>店铺：小桔灯</em>-->
                      </div>
                      <div class="order-content">
                        <div class="order-left">
                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/kouhong.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>美康粉黛醉美唇膏 持久保湿滋润防水不掉色</p>
                                    <p class="info-little">颜色：12#川南玛瑙
                                      <br/>包装：裸装 </p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">
                                <a href="refund.html">退款/退货</a>
                              </div>
                            </li>
                          </ul>

                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/62988.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>礼盒袜子女秋冬 纯棉袜加厚 韩国可爱 </p>
                                    <p class="info-little">颜色分类：李清照
                                      <br/>尺码：均码</p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">
                                <a href="refund.html">退款/退货</a>
                              </div>
                            </li>
                          </ul>

                        </div>
                        <div class="order-right">
                          <li class="td td-amount">
                            <div class="item-amount">
                              合计：676.00
                              <p>含运费：<span>10.00</span></p>
                            </div>
                          </li>
                          <div class="move-right">
                            <li class="td td-status">
                              <div class="item-status">
                                <p class="Mystatus">卖家已发货</p>
                                <p class="order-info"><a href="orderinfo.html">订单详情</a></p>
                                <p class="order-info"><a href="logistics.html">查看物流</a></p>
                                <p class="order-info"><a href="#">延长收货</a></p>
                              </div>
                            </li>
                            <li class="td td-change">
                              <div class="am-btn am-btn-danger anniu">
                                确认收货
                              </div>
                            </li>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="am-tab-panel am-fade" id="tab5">
                <div class="order-top">
                  <div class="th th-item">
                    <td class="td-inner">商品</td>
                  </div>
                  <div class="th th-price">
                    <td class="td-inner">单价</td>
                  </div>
                  <div class="th th-number">
                    <td class="td-inner">数量</td>
                  </div>
                  <div class="th th-operation">
                    <td class="td-inner">商品操作</td>
                  </div>
                  <div class="th th-amount">
                    <td class="td-inner">合计</td>
                  </div>
                  <div class="th th-status">
                    <td class="td-inner">交易状态</td>
                  </div>
                  <div class="th th-change">
                    <td class="td-inner">交易操作</td>
                  </div>
                </div>

                <div class="order-main">
                  <div class="order-list">
                    <!--不同状态的订单	-->
                    <div class="order-status4">
                      <div class="order-title">
                        <div class="dd-num">订单编号：<a href="javascript:;">1601430</a></div>
                        <span>成交时间：2015-12-20</span>

                      </div>
                      <div class="order-content">
                        <div class="order-left">
                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/kouhong.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>美康粉黛醉美唇膏 持久保湿滋润防水不掉色</p>
                                    <p class="info-little">颜色：12#川南玛瑙
                                      <br/>包装：裸装 </p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">
                                <a href="refund.html">退款/退货</a>
                              </div>
                            </li>
                          </ul>

                        </div>
                        <div class="order-right">
                          <li class="td td-amount">
                            <div class="item-amount">
                              合计：676.00
                              <p>含运费：<span>10.00</span></p>
                            </div>
                          </li>
                          <div class="move-right">
                            <li class="td td-status">
                              <div class="item-status">
                                <p class="Mystatus">交易成功</p>
                                <p class="order-info"><a href="orderinfo.html">订单详情</a></p>
                                <p class="order-info"><a href="logistics.html">查看物流</a></p>
                              </div>
                            </li>
                            <li class="td td-change">
                              <a href="commentlist.html">
                                <div class="am-btn am-btn-danger anniu">
                                  评价商品
                                </div>
                              </a>
                            </li>
                          </div>
                        </div>
                      </div>
                    </div>


                    <div class="order-status4">
                      <div class="order-title">
                        <div class="dd-num">订单编号：<a href="javascript:;">1601430</a></div>
                        <span>成交时间：2015-12-20</span>
                        <!--    <em>店铺：小桔灯</em>-->
                      </div>
                      <div class="order-content">
                        <div class="order-left">
                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/kouhong.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>美康粉黛醉美唇膏 持久保湿滋润防水不掉色</p>
                                    <p class="info-little">颜色：12#川南玛瑙
                                      <br/>包装：裸装 </p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">
                                <a href="refund.html">退款/退货</a>
                              </div>
                            </li>
                          </ul>

                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/62988.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>礼盒袜子女秋冬 纯棉袜加厚 韩国可爱 </p>
                                    <p class="info-little">颜色分类：李清照
                                      <br/>尺码：均码</p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">
                                <a href="refund.html">退款/退货</a>
                              </div>
                            </li>
                          </ul>

                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/kouhong.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>美康粉黛醉美唇膏 持久保湿滋润防水不掉色</p>
                                    <p class="info-little">颜色：12#川南玛瑙
                                      <br/>包装：裸装 </p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">
                                <a href="refund.html">退款/退货</a>
                              </div>
                            </li>
                          </ul>


                        </div>
                        <div class="order-right">
                          <li class="td td-amount">
                            <div class="item-amount">
                              合计：676.00
                              <p>含运费：<span>10.00</span></p>
                            </div>
                          </li>
                          <div class="move-right">
                            <li class="td td-status">
                              <div class="item-status">
                                <p class="Mystatus">交易成功</p>
                                <p class="order-info"><a href="orderinfo.html">订单详情</a></p>
                                <p class="order-info"><a href="logistics.html">查看物流</a></p>
                              </div>
                            </li>
                            <li class="td td-change">
                              <a href="commentlist.html">
                                <div class="am-btn am-btn-danger anniu">
                                  评价商品
                                </div>
                              </a>
                            </li>
                          </div>
                        </div>
                      </div>
                    </div>


                  </div>

                </div>

              </div>
            </div>
            <!--分页 -->
            <template v-if="orders.length!=0">
              <el-pagination class="am-pagination am-pagination-centered"
                             background
                             layout="prev, pager, next"
                             :total="count"
                             :page-size="pageSize"
                             @next-click="next" @prev-click="prev" @current-change="pager">
              </el-pagination>
            </template>
          </el-tab-pane>
          <el-tab-pane label="待付款" name="second">
            <div class="am-tabs-bd">
              <div class="am-tab-panel am-fade am-in am-active" id="tab1">
                <div class="order-top">
                  <div class="th th-item">
                    <td class="td-inner">商品</td>
                  </div>
                  <div class="th th-price">
                    <td class="td-inner">单价</td>
                  </div>
                  <div class="th th-number">
                    <td class="td-inner">数量</td>
                  </div>
                  <div class="th th-operation">
                    <td class="td-inner">商品操作</td>
                  </div>
                  <div class="th th-amount">
                    <td class="td-inner">合计</td>
                  </div>
                  <div class="th th-status">
                    <td class="td-inner">交易状态</td>
                  </div>
                  <div class="th th-change">
                    <td class="td-inner">交易操作</td>
                  </div>
                </div>

                <div class="order-main">
                  <div class="order-list">

                    <!--交易成功-->
                    <template v-for="order in orders">
                      <div class="order-status5">
                        <div class="order-title">
                          <div class="dd-num" style="max-width: 700px;width: 40%">订单编号：<a
                              href="javascript:;">{{ order.orderId }}</a></div>
                          <span>成交时间：{{ order.flishTime|dateFormat }}</span>
                          <!--    <em>店铺：小桔灯</em>-->
                        </div>
                        <div class="order-content">
                          <div class="order-left">
                            <template v-for="orderItem in order.orderItems">
                              <ul class="item-list">
                                <li class="td td-item">
                                  <div class="item-pic">
                                    <a href="#" class="J_MakePoint">
                                      <img :src="orderItem.productImg" class="itempic J_ItemImg">
                                    </a>
                                  </div>
                                  <div class="item-info">
                                    <div class="item-basic-info">
                                      <a href="#">
                                        <p>{{ orderItem.productName }}</p>
                                        <p class="info-little">{{ orderItem.skuName }}
                                          <!--<br/>包装：裸装--> </p>
                                      </a>
                                    </div>
                                  </div>
                                </li>
                                <li class="td td-price">
                                  <div class="item-price">
                                    {{ orderItem.productPrice }}
                                  </div>
                                </li>
                                <li class="td td-number">
                                  <div class="item-number">
                                    <span>×</span>{{ orderItem.buyCounts }}
                                  </div>
                                </li>
                                <li class="td td-operation">
                                  <div class="item-operation">
                                    <a href="javascript:void(0)" v-if="order.status==2">退款</a>
                                  </div>
                                </li>
                              </ul>
                            </template>
                          </div>
                          <div class="order-right">
                            <li class="td td-amount">
                              <div class="item-amount">
                                合计：{{ order.totalAmount }}
                                <p>含运费：<span>包邮</span></p>
                              </div>
                            </li>
                            <div class="move-right">
                              <li class="td td-status">
                                <div class="item-status">
                                  <!--订单状态 1:待付款 2:待发货 3:待收货 4:待评价 5:已完成 6:已关闭-->
                                  <!--交易成功-->
                                  <p class="Mystatus" v-if="order.status == 5">交易成功</p>
                                  <p class="Mystatus" v-if="order.status == 2">买家已付款</p>
                                  <p class="Mystatus" v-if="order.status == 3">卖家已发货</p>
                                  <p class="Mystatus" v-if="order.status == 1">等待买家付款</p>
                                  <p class="Mystatus" v-if="order.status == 1"><a href="javascript:void(0)">取消订单</a></p>
                                  <p class="order-info"><a href="orderinfo.html" v-if="order.status == 3">订单详情</a></p>
                                  <p class="order-info"><a href="javascript:void(0)" v-if="order.status == 3">查看物流</a>
                                  </p>
                                  <!--交易关闭-->
                                  <p class="Mystatus" v-if="order.status ==6">交易关闭</p>

                                </div>
                              </li>
                              <li class="td td-change">

                                <div class="am-btn am-btn-danger anniu" v-if="order.status ==1" @click="goPay(order)">
                                  一键支付
                                </div>
                                <div class="am-btn am-btn-danger anniu" v-if="order.status ==2">
                                  提醒发货
                                </div>
                                <div class="am-btn am-btn-danger anniu" v-if="order.status ==3">
                                  确认收货
                                </div>
                                <div class="am-btn am-btn-danger anniu" v-if="order.status ==4"
                                     @click="goComment(orders)">
                                  评价商品
                                </div>
                                <div class="am-btn am-btn-danger anniu" v-if="order.status==6" @click="delOrder(order)">
                                  删除订单
                                </div>

                              </li>
                            </div>
                          </div>
                        </div>
                      </div>
                    </template>
                  </div>

                </div>

              </div>
              <div class="am-tab-panel am-fade" id="tab2">

                <div class="order-top">
                  <div class="th th-item">
                    <td class="td-inner">商品</td>
                  </div>
                  <div class="th th-price">
                    <td class="td-inner">单价</td>
                  </div>
                  <div class="th th-number">
                    <td class="td-inner">数量</td>
                  </div>
                  <div class="th th-operation">
                    <td class="td-inner">商品操作</td>
                  </div>
                  <div class="th th-amount">
                    <td class="td-inner">合计</td>
                  </div>
                  <div class="th th-status">
                    <td class="td-inner">交易状态</td>
                  </div>
                  <div class="th th-change">
                    <td class="td-inner">交易操作</td>
                  </div>
                </div>

                <div class="order-main">
                  <div class="order-list">
                    <div class="order-status1">
                      <div class="order-title">
                        <div class="dd-num">订单编号：<a href="javascript:;">1601430</a></div>
                        <span>成交时间：2015-12-20</span>
                        <!--    <em>店铺：小桔灯</em>-->
                      </div>
                      <div class="order-content">
                        <div class="order-left">
                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/kouhong.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>美康粉黛醉美唇膏 持久保湿滋润防水不掉色</p>
                                    <p class="info-little">颜色：12#川南玛瑙
                                      <br/>包装：裸装 </p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">

                              </div>
                            </li>
                          </ul>

                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/62988.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>礼盒袜子女秋冬 纯棉袜加厚 韩国可爱 </p>
                                    <p class="info-little">颜色分类：李清照
                                      <br/>尺码：均码</p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">

                              </div>
                            </li>
                          </ul>

                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/kouhong.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>美康粉黛醉美唇膏 持久保湿滋润防水不掉色</p>
                                    <p class="info-little">颜色：12#川南玛瑙
                                      <br/>包装：裸装 </p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">

                              </div>
                            </li>
                          </ul>
                        </div>
                        <div class="order-right">
                          <li class="td td-amount">
                            <div class="item-amount">
                              合计：676.00
                              <p>含运费：<span>10.00</span></p>
                            </div>
                          </li>
                          <div class="move-right">
                            <li class="td td-status">
                              <div class="item-status">
                                <p class="Mystatus">等待买家付款</p>
                                <p class="order-info"><a href="#">取消订单</a></p>

                              </div>
                            </li>
                            <li class="td td-change">
                              <a href="pay.html">
                                <div class="am-btn am-btn-danger anniu" @click="goPay(order)">
                                  一键支付
                                </div>
                              </a>
                            </li>
                          </div>
                        </div>

                      </div>
                    </div>
                  </div>

                </div>
              </div>
              <div class="am-tab-panel am-fade" id="tab3">
                <div class="order-top">
                  <div class="th th-item">
                    <td class="td-inner">商品</td>
                  </div>
                  <div class="th th-price">
                    <td class="td-inner">单价</td>
                  </div>
                  <div class="th th-number">
                    <td class="td-inner">数量</td>
                  </div>
                  <div class="th th-operation">
                    <td class="td-inner">商品操作</td>
                  </div>
                  <div class="th th-amount">
                    <td class="td-inner">合计</td>
                  </div>
                  <div class="th th-status">
                    <td class="td-inner">交易状态</td>
                  </div>
                  <div class="th th-change">
                    <td class="td-inner">交易操作</td>
                  </div>
                </div>

                <div class="order-main">
                  <div class="order-list">
                    <div class="order-status2">
                      <div class="order-title">
                        <div class="dd-num">订单编号：<a href="javascript:;">1601430</a></div>
                        <span>成交时间：2015-12-20</span>
                        <!--    <em>店铺：小桔灯</em>-->
                      </div>
                      <div class="order-content">
                        <div class="order-left">
                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/kouhong.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>美康粉黛醉美唇膏 持久保湿滋润防水不掉色</p>
                                    <p class="info-little">颜色：12#川南玛瑙
                                      <br/>包装：裸装 </p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">
                                <a href="refund.html">退款</a>
                              </div>
                            </li>
                          </ul>

                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/62988.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>礼盒袜子女秋冬 纯棉袜加厚 韩国可爱 </p>
                                    <p class="info-little">颜色分类：李清照
                                      <br/>尺码：均码</p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">
                                <a href="refund.html">退款</a>
                              </div>
                            </li>
                          </ul>

                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/kouhong.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>美康粉黛醉美唇膏 持久保湿滋润防水不掉色</p>
                                    <p class="info-little">颜色：12#川南玛瑙
                                      <br/>包装：裸装 </p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">
                                <a href="refund.html">退款</a>
                              </div>
                            </li>
                          </ul>
                        </div>
                        <div class="order-right">
                          <li class="td td-amount">
                            <div class="item-amount">
                              合计：676.00
                              <p>含运费：<span>10.00</span></p>
                            </div>
                          </li>
                          <div class="move-right">
                            <li class="td td-status">
                              <div class="item-status">
                                <p class="Mystatus">买家已付款</p>
                                <p class="order-info"><a href="orderinfo.html">订单详情</a></p>
                              </div>
                            </li>
                            <li class="td td-change">
                              <div class="am-btn am-btn-danger anniu">
                                提醒发货
                              </div>
                            </li>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="am-tab-panel am-fade" id="tab4">
                <div class="order-top">
                  <div class="th th-item">
                    <td class="td-inner">商品</td>
                  </div>
                  <div class="th th-price">
                    <td class="td-inner">单价</td>
                  </div>
                  <div class="th th-number">
                    <td class="td-inner">数量</td>
                  </div>
                  <div class="th th-operation">
                    <td class="td-inner">商品操作</td>
                  </div>
                  <div class="th th-amount">
                    <td class="td-inner">合计</td>
                  </div>
                  <div class="th th-status">
                    <td class="td-inner">交易状态</td>
                  </div>
                  <div class="th th-change">
                    <td class="td-inner">交易操作</td>
                  </div>
                </div>

                <div class="order-main">
                  <div class="order-list">
                    <div class="order-status3">
                      <div class="order-title">
                        <div class="dd-num">订单编号：<a href="javascript:;">1601430</a></div>
                        <span>成交时间：2015-12-20</span>
                        <!--    <em>店铺：小桔灯</em>-->
                      </div>
                      <div class="order-content">
                        <div class="order-left">
                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/kouhong.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>美康粉黛醉美唇膏 持久保湿滋润防水不掉色</p>
                                    <p class="info-little">颜色：12#川南玛瑙
                                      <br/>包装：裸装 </p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">
                                <a href="refund.html">退款/退货</a>
                              </div>
                            </li>
                          </ul>

                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/62988.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>礼盒袜子女秋冬 纯棉袜加厚 韩国可爱 </p>
                                    <p class="info-little">颜色分类：李清照
                                      <br/>尺码：均码</p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">
                                <a href="refund.html">退款/退货</a>
                              </div>
                            </li>
                          </ul>

                        </div>
                        <div class="order-right">
                          <li class="td td-amount">
                            <div class="item-amount">
                              合计：676.00
                              <p>含运费：<span>10.00</span></p>
                            </div>
                          </li>
                          <div class="move-right">
                            <li class="td td-status">
                              <div class="item-status">
                                <p class="Mystatus">卖家已发货</p>
                                <p class="order-info"><a href="orderinfo.html">订单详情</a></p>
                                <p class="order-info"><a href="logistics.html">查看物流</a></p>
                                <p class="order-info"><a href="#">延长收货</a></p>
                              </div>
                            </li>
                            <li class="td td-change">
                              <div class="am-btn am-btn-danger anniu">
                                确认收货
                              </div>
                            </li>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="am-tab-panel am-fade" id="tab5">
                <div class="order-top">
                  <div class="th th-item">
                    <td class="td-inner">商品</td>
                  </div>
                  <div class="th th-price">
                    <td class="td-inner">单价</td>
                  </div>
                  <div class="th th-number">
                    <td class="td-inner">数量</td>
                  </div>
                  <div class="th th-operation">
                    <td class="td-inner">商品操作</td>
                  </div>
                  <div class="th th-amount">
                    <td class="td-inner">合计</td>
                  </div>
                  <div class="th th-status">
                    <td class="td-inner">交易状态</td>
                  </div>
                  <div class="th th-change">
                    <td class="td-inner">交易操作</td>
                  </div>
                </div>

                <div class="order-main">
                  <div class="order-list">
                    <!--不同状态的订单	-->
                    <div class="order-status4">
                      <div class="order-title">
                        <div class="dd-num">订单编号：<a href="javascript:;">1601430</a></div>
                        <span>成交时间：2015-12-20</span>

                      </div>
                      <div class="order-content">
                        <div class="order-left">
                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/kouhong.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>美康粉黛醉美唇膏 持久保湿滋润防水不掉色</p>
                                    <p class="info-little">颜色：12#川南玛瑙
                                      <br/>包装：裸装 </p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">
                                <a href="refund.html">退款/退货</a>
                              </div>
                            </li>
                          </ul>

                        </div>
                        <div class="order-right">
                          <li class="td td-amount">
                            <div class="item-amount">
                              合计：676.00
                              <p>含运费：<span>10.00</span></p>
                            </div>
                          </li>
                          <div class="move-right">
                            <li class="td td-status">
                              <div class="item-status">
                                <p class="Mystatus">交易成功</p>
                                <p class="order-info"><a href="orderinfo.html">订单详情</a></p>
                                <p class="order-info"><a href="logistics.html">查看物流</a></p>
                              </div>
                            </li>
                            <li class="td td-change">
                              <a href="commentlist.html">
                                <div class="am-btn am-btn-danger anniu">
                                  评价商品
                                </div>
                              </a>
                            </li>
                          </div>
                        </div>
                      </div>
                    </div>


                    <div class="order-status4">
                      <div class="order-title">
                        <div class="dd-num">订单编号：<a href="javascript:;">1601430</a></div>
                        <span>成交时间：2015-12-20</span>
                        <!--    <em>店铺：小桔灯</em>-->
                      </div>
                      <div class="order-content">
                        <div class="order-left">
                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/kouhong.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>美康粉黛醉美唇膏 持久保湿滋润防水不掉色</p>
                                    <p class="info-little">颜色：12#川南玛瑙
                                      <br/>包装：裸装 </p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">
                                <a href="refund.html">退款/退货</a>
                              </div>
                            </li>
                          </ul>

                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/62988.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>礼盒袜子女秋冬 纯棉袜加厚 韩国可爱 </p>
                                    <p class="info-little">颜色分类：李清照
                                      <br/>尺码：均码</p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">
                                <a href="refund.html">退款/退货</a>
                              </div>
                            </li>
                          </ul>

                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/kouhong.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>美康粉黛醉美唇膏 持久保湿滋润防水不掉色</p>
                                    <p class="info-little">颜色：12#川南玛瑙
                                      <br/>包装：裸装 </p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">
                                <a href="refund.html">退款/退货</a>
                              </div>
                            </li>
                          </ul>


                        </div>
                        <div class="order-right">
                          <li class="td td-amount">
                            <div class="item-amount">
                              合计：676.00
                              <p>含运费：<span>10.00</span></p>
                            </div>
                          </li>
                          <div class="move-right">
                            <li class="td td-status">
                              <div class="item-status">
                                <p class="Mystatus">交易成功</p>
                                <p class="order-info"><a href="orderinfo.html">订单详情</a></p>
                                <p class="order-info"><a href="logistics.html">查看物流</a></p>
                              </div>
                            </li>
                            <li class="td td-change">
                              <a href="commentlist.html">
                                <div class="am-btn am-btn-danger anniu">
                                  评价商品
                                </div>
                              </a>
                            </li>
                          </div>
                        </div>
                      </div>
                    </div>


                  </div>

                </div>

              </div>
            </div>
            <!--分页 -->
            <template v-if="orders.length!=0">
              <el-pagination class="am-pagination am-pagination-centered"
                             background
                             layout="prev, pager, next"
                             :total="count"
                             :page-size="pageSize"
                             @next-click="next" @prev-click="prev" @current-change="pager">
              </el-pagination>
            </template>
          </el-tab-pane>
          <el-tab-pane label="待发货" name="third">
            <!--待发货-->
            <div class="am-tabs-bd">
              <div class="am-tab-panel am-fade am-in am-active" id="tab1">
                <div class="order-top">
                  <div class="th th-item">
                    <td class="td-inner">商品</td>
                  </div>
                  <div class="th th-price">
                    <td class="td-inner">单价</td>
                  </div>
                  <div class="th th-number">
                    <td class="td-inner">数量</td>
                  </div>
                  <div class="th th-operation">
                    <td class="td-inner">商品操作</td>
                  </div>
                  <div class="th th-amount">
                    <td class="td-inner">合计</td>
                  </div>
                  <div class="th th-status">
                    <td class="td-inner">交易状态</td>
                  </div>
                  <div class="th th-change">
                    <td class="td-inner">交易操作</td>
                  </div>
                </div>

                <div class="order-main">
                  <div class="order-list">

                    <!--交易成功-->
                    <template v-for="order in orders">
                      <div class="order-status5">
                        <div class="order-title">
                          <div class="dd-num" style="max-width: 700px;width: 40%">订单编号：<a
                              href="javascript:;">{{ order.orderId }}</a></div>
                          <span>成交时间：{{ order.flishTime|dateFormat }}</span>
                          <!--    <em>店铺：小桔灯</em>-->
                        </div>
                        <div class="order-content">
                          <div class="order-left">
                            <template v-for="orderItem in order.orderItems">
                              <ul class="item-list">
                                <li class="td td-item">
                                  <div class="item-pic">
                                    <a href="#" class="J_MakePoint">
                                      <img :src="orderItem.productImg" class="itempic J_ItemImg">
                                    </a>
                                  </div>
                                  <div class="item-info">
                                    <div class="item-basic-info">
                                      <a href="#">
                                        <p>{{ orderItem.productName }}</p>
                                        <p class="info-little">{{ orderItem.skuName }}
                                          <!--<br/>包装：裸装--> </p>
                                      </a>
                                    </div>
                                  </div>
                                </li>
                                <li class="td td-price">
                                  <div class="item-price">
                                    {{ orderItem.productPrice }}
                                  </div>
                                </li>
                                <li class="td td-number">
                                  <div class="item-number">
                                    <span>×</span>{{ orderItem.buyCounts }}
                                  </div>
                                </li>
                                <li class="td td-operation">
                                  <div class="item-operation">
                                    <a href="javascript:void(0)" v-if="order.status==2">退款</a>
                                  </div>
                                </li>
                              </ul>
                            </template>
                          </div>
                          <div class="order-right">
                            <li class="td td-amount">
                              <div class="item-amount">
                                合计：{{ order.totalAmount }}
                                <p>含运费：<span>包邮</span></p>
                              </div>
                            </li>
                            <div class="move-right">
                              <li class="td td-status">
                                <div class="item-status">
                                  <!--订单状态 1:待付款 2:待发货 3:待收货 4:待评价 5:已完成 6:已关闭-->
                                  <!--交易成功-->
                                  <p class="Mystatus" v-if="order.status == 5">交易成功</p>
                                  <p class="Mystatus" v-if="order.status == 2">买家已付款</p>
                                  <p class="Mystatus" v-if="order.status == 3">卖家已发货</p>
                                  <p class="Mystatus" v-if="order.status == 1">等待买家付款</p>
                                  <p class="Mystatus" v-if="order.status == 1"><a href="javascript:void(0)">取消订单</a></p>
                                  <p class="order-info"><a href="orderinfo.html" v-if="order.status == 3">订单详情</a></p>
                                  <p class="order-info"><a href="javascript:void(0)" v-if="order.status == 3">查看物流</a>
                                  </p>
                                  <!--交易关闭-->
                                  <p class="Mystatus" v-if="order.status ==6">交易关闭</p>

                                </div>
                              </li>
                              <li class="td td-change">

                                <div class="am-btn am-btn-danger anniu" v-if="order.status ==1" @click="goPay(order)">
                                  一键支付
                                </div>
                                <div class="am-btn am-btn-danger anniu" v-if="order.status ==2">
                                  提醒发货
                                </div>
                                <div class="am-btn am-btn-danger anniu" v-if="order.status ==3">
                                  确认收货
                                </div>
                                <div class="am-btn am-btn-danger anniu" v-if="order.status ==4"
                                     @click="goComment(orders)">
                                  评价商品
                                </div>
                                <div class="am-btn am-btn-danger anniu" v-if="order.status==6" @click="delOrder(order)">
                                  删除订单
                                </div>

                              </li>
                            </div>
                          </div>
                        </div>
                      </div>
                    </template>
                  </div>

                </div>

              </div>
              <div class="am-tab-panel am-fade" id="tab2">

                <div class="order-top">
                  <div class="th th-item">
                    <td class="td-inner">商品</td>
                  </div>
                  <div class="th th-price">
                    <td class="td-inner">单价</td>
                  </div>
                  <div class="th th-number">
                    <td class="td-inner">数量</td>
                  </div>
                  <div class="th th-operation">
                    <td class="td-inner">商品操作</td>
                  </div>
                  <div class="th th-amount">
                    <td class="td-inner">合计</td>
                  </div>
                  <div class="th th-status">
                    <td class="td-inner">交易状态</td>
                  </div>
                  <div class="th th-change">
                    <td class="td-inner">交易操作</td>
                  </div>
                </div>

                <div class="order-main">
                  <div class="order-list">
                    <div class="order-status1">
                      <div class="order-title">
                        <div class="dd-num">订单编号：<a href="javascript:;">1601430</a></div>
                        <span>成交时间：2015-12-20</span>
                        <!--    <em>店铺：小桔灯</em>-->
                      </div>
                      <div class="order-content">
                        <div class="order-left">
                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/kouhong.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>美康粉黛醉美唇膏 持久保湿滋润防水不掉色</p>
                                    <p class="info-little">颜色：12#川南玛瑙
                                      <br/>包装：裸装 </p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">

                              </div>
                            </li>
                          </ul>

                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/62988.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>礼盒袜子女秋冬 纯棉袜加厚 韩国可爱 </p>
                                    <p class="info-little">颜色分类：李清照
                                      <br/>尺码：均码</p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">

                              </div>
                            </li>
                          </ul>

                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/kouhong.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>美康粉黛醉美唇膏 持久保湿滋润防水不掉色</p>
                                    <p class="info-little">颜色：12#川南玛瑙
                                      <br/>包装：裸装 </p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">

                              </div>
                            </li>
                          </ul>
                        </div>
                        <div class="order-right">
                          <li class="td td-amount">
                            <div class="item-amount">
                              合计：676.00
                              <p>含运费：<span>10.00</span></p>
                            </div>
                          </li>
                          <div class="move-right">
                            <li class="td td-status">
                              <div class="item-status">
                                <p class="Mystatus">等待买家付款</p>
                                <p class="order-info"><a href="#">取消订单</a></p>

                              </div>
                            </li>
                            <li class="td td-change">
                              <a href="pay.html">
                                <div class="am-btn am-btn-danger anniu" @click="goPay(order)">
                                  一键支付
                                </div>
                              </a>
                            </li>
                          </div>
                        </div>

                      </div>
                    </div>
                  </div>

                </div>
              </div>
              <div class="am-tab-panel am-fade" id="tab3">
                <div class="order-top">
                  <div class="th th-item">
                    <td class="td-inner">商品</td>
                  </div>
                  <div class="th th-price">
                    <td class="td-inner">单价</td>
                  </div>
                  <div class="th th-number">
                    <td class="td-inner">数量</td>
                  </div>
                  <div class="th th-operation">
                    <td class="td-inner">商品操作</td>
                  </div>
                  <div class="th th-amount">
                    <td class="td-inner">合计</td>
                  </div>
                  <div class="th th-status">
                    <td class="td-inner">交易状态</td>
                  </div>
                  <div class="th th-change">
                    <td class="td-inner">交易操作</td>
                  </div>
                </div>

                <div class="order-main">
                  <div class="order-list">
                    <div class="order-status2">
                      <div class="order-title">
                        <div class="dd-num">订单编号：<a href="javascript:;">1601430</a></div>
                        <span>成交时间：2015-12-20</span>
                        <!--    <em>店铺：小桔灯</em>-->
                      </div>
                      <div class="order-content">
                        <div class="order-left">
                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/kouhong.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>美康粉黛醉美唇膏 持久保湿滋润防水不掉色</p>
                                    <p class="info-little">颜色：12#川南玛瑙
                                      <br/>包装：裸装 </p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">
                                <a href="refund.html">退款</a>
                              </div>
                            </li>
                          </ul>

                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/62988.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>礼盒袜子女秋冬 纯棉袜加厚 韩国可爱 </p>
                                    <p class="info-little">颜色分类：李清照
                                      <br/>尺码：均码</p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">
                                <a href="refund.html">退款</a>
                              </div>
                            </li>
                          </ul>

                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/kouhong.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>美康粉黛醉美唇膏 持久保湿滋润防水不掉色</p>
                                    <p class="info-little">颜色：12#川南玛瑙
                                      <br/>包装：裸装 </p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">
                                <a href="refund.html">退款</a>
                              </div>
                            </li>
                          </ul>
                        </div>
                        <div class="order-right">
                          <li class="td td-amount">
                            <div class="item-amount">
                              合计：676.00
                              <p>含运费：<span>10.00</span></p>
                            </div>
                          </li>
                          <div class="move-right">
                            <li class="td td-status">
                              <div class="item-status">
                                <p class="Mystatus">买家已付款</p>
                                <p class="order-info"><a href="orderinfo.html">订单详情</a></p>
                              </div>
                            </li>
                            <li class="td td-change">
                              <div class="am-btn am-btn-danger anniu">
                                提醒发货
                              </div>
                            </li>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="am-tab-panel am-fade" id="tab4">
                <div class="order-top">
                  <div class="th th-item">
                    <td class="td-inner">商品</td>
                  </div>
                  <div class="th th-price">
                    <td class="td-inner">单价</td>
                  </div>
                  <div class="th th-number">
                    <td class="td-inner">数量</td>
                  </div>
                  <div class="th th-operation">
                    <td class="td-inner">商品操作</td>
                  </div>
                  <div class="th th-amount">
                    <td class="td-inner">合计</td>
                  </div>
                  <div class="th th-status">
                    <td class="td-inner">交易状态</td>
                  </div>
                  <div class="th th-change">
                    <td class="td-inner">交易操作</td>
                  </div>
                </div>

                <div class="order-main">
                  <div class="order-list">
                    <div class="order-status3">
                      <div class="order-title">
                        <div class="dd-num">订单编号：<a href="javascript:;">1601430</a></div>
                        <span>成交时间：2015-12-20</span>
                        <!--    <em>店铺：小桔灯</em>-->
                      </div>
                      <div class="order-content">
                        <div class="order-left">
                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/kouhong.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>美康粉黛醉美唇膏 持久保湿滋润防水不掉色</p>
                                    <p class="info-little">颜色：12#川南玛瑙
                                      <br/>包装：裸装 </p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">
                                <a href="refund.html">退款/退货</a>
                              </div>
                            </li>
                          </ul>

                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/62988.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>礼盒袜子女秋冬 纯棉袜加厚 韩国可爱 </p>
                                    <p class="info-little">颜色分类：李清照
                                      <br/>尺码：均码</p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">
                                <a href="refund.html">退款/退货</a>
                              </div>
                            </li>
                          </ul>

                        </div>
                        <div class="order-right">
                          <li class="td td-amount">
                            <div class="item-amount">
                              合计：676.00
                              <p>含运费：<span>10.00</span></p>
                            </div>
                          </li>
                          <div class="move-right">
                            <li class="td td-status">
                              <div class="item-status">
                                <p class="Mystatus">卖家已发货</p>
                                <p class="order-info"><a href="orderinfo.html">订单详情</a></p>
                                <p class="order-info"><a href="logistics.html">查看物流</a></p>
                                <p class="order-info"><a href="#">延长收货</a></p>
                              </div>
                            </li>
                            <li class="td td-change">
                              <div class="am-btn am-btn-danger anniu">
                                确认收货
                              </div>
                            </li>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="am-tab-panel am-fade" id="tab5">
                <div class="order-top">
                  <div class="th th-item">
                    <td class="td-inner">商品</td>
                  </div>
                  <div class="th th-price">
                    <td class="td-inner">单价</td>
                  </div>
                  <div class="th th-number">
                    <td class="td-inner">数量</td>
                  </div>
                  <div class="th th-operation">
                    <td class="td-inner">商品操作</td>
                  </div>
                  <div class="th th-amount">
                    <td class="td-inner">合计</td>
                  </div>
                  <div class="th th-status">
                    <td class="td-inner">交易状态</td>
                  </div>
                  <div class="th th-change">
                    <td class="td-inner">交易操作</td>
                  </div>
                </div>

                <div class="order-main">
                  <div class="order-list">
                    <!--不同状态的订单	-->
                    <div class="order-status4">
                      <div class="order-title">
                        <div class="dd-num">订单编号：<a href="javascript:;">1601430</a></div>
                        <span>成交时间：2015-12-20</span>

                      </div>
                      <div class="order-content">
                        <div class="order-left">
                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/kouhong.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>美康粉黛醉美唇膏 持久保湿滋润防水不掉色</p>
                                    <p class="info-little">颜色：12#川南玛瑙
                                      <br/>包装：裸装 </p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">
                                <a href="refund.html">退款/退货</a>
                              </div>
                            </li>
                          </ul>

                        </div>
                        <div class="order-right">
                          <li class="td td-amount">
                            <div class="item-amount">
                              合计：676.00
                              <p>含运费：<span>10.00</span></p>
                            </div>
                          </li>
                          <div class="move-right">
                            <li class="td td-status">
                              <div class="item-status">
                                <p class="Mystatus">交易成功</p>
                                <p class="order-info"><a href="orderinfo.html">订单详情</a></p>
                                <p class="order-info"><a href="logistics.html">查看物流</a></p>
                              </div>
                            </li>
                            <li class="td td-change">
                              <a href="commentlist.html">
                                <div class="am-btn am-btn-danger anniu">
                                  评价商品
                                </div>
                              </a>
                            </li>
                          </div>
                        </div>
                      </div>
                    </div>


                    <div class="order-status4">
                      <div class="order-title">
                        <div class="dd-num">订单编号：<a href="javascript:;">1601430</a></div>
                        <span>成交时间：2015-12-20</span>
                        <!--    <em>店铺：小桔灯</em>-->
                      </div>
                      <div class="order-content">
                        <div class="order-left">
                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/kouhong.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>美康粉黛醉美唇膏 持久保湿滋润防水不掉色</p>
                                    <p class="info-little">颜色：12#川南玛瑙
                                      <br/>包装：裸装 </p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">
                                <a href="refund.html">退款/退货</a>
                              </div>
                            </li>
                          </ul>

                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/62988.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>礼盒袜子女秋冬 纯棉袜加厚 韩国可爱 </p>
                                    <p class="info-little">颜色分类：李清照
                                      <br/>尺码：均码</p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">
                                <a href="refund.html">退款/退货</a>
                              </div>
                            </li>
                          </ul>

                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/kouhong.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>美康粉黛醉美唇膏 持久保湿滋润防水不掉色</p>
                                    <p class="info-little">颜色：12#川南玛瑙
                                      <br/>包装：裸装 </p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">
                                <a href="refund.html">退款/退货</a>
                              </div>
                            </li>
                          </ul>


                        </div>
                        <div class="order-right">
                          <li class="td td-amount">
                            <div class="item-amount">
                              合计：676.00
                              <p>含运费：<span>10.00</span></p>
                            </div>
                          </li>
                          <div class="move-right">
                            <li class="td td-status">
                              <div class="item-status">
                                <p class="Mystatus">交易成功</p>
                                <p class="order-info"><a href="orderinfo.html">订单详情</a></p>
                                <p class="order-info"><a href="logistics.html">查看物流</a></p>
                              </div>
                            </li>
                            <li class="td td-change">
                              <a href="commentlist.html">
                                <div class="am-btn am-btn-danger anniu">
                                  评价商品
                                </div>
                              </a>
                            </li>
                          </div>
                        </div>
                      </div>
                    </div>


                  </div>

                </div>

              </div>
            </div>
            <!--分页 -->
            <template v-if="orders.length!=0">
              <el-pagination class="am-pagination am-pagination-centered"
                             background
                             layout="prev, pager, next"
                             :total="count"
                             :page-size="pageSize"
                             @next-click="next" @prev-click="prev" @current-change="pager">
              </el-pagination>
            </template>
          </el-tab-pane>
          <el-tab-pane label="待收货" name="fourth">
            <!--不同状态订单-->
            <div class="am-tabs-bd">
              <div class="am-tab-panel am-fade am-in am-active" id="tab1">
                <div class="order-top">
                  <div class="th th-item">
                    <td class="td-inner">商品</td>
                  </div>
                  <div class="th th-price">
                    <td class="td-inner">单价</td>
                  </div>
                  <div class="th th-number">
                    <td class="td-inner">数量</td>
                  </div>
                  <div class="th th-operation">
                    <td class="td-inner">商品操作</td>
                  </div>
                  <div class="th th-amount">
                    <td class="td-inner">合计</td>
                  </div>
                  <div class="th th-status">
                    <td class="td-inner">交易状态</td>
                  </div>
                  <div class="th th-change">
                    <td class="td-inner">交易操作</td>
                  </div>
                </div>

                <div class="order-main">
                  <div class="order-list">

                    <!--交易成功-->
                    <template v-for="order in orders">
                      <div class="order-status5">
                        <div class="order-title">
                          <div class="dd-num" style="max-width: 700px;width: 40%">订单编号：<a
                              href="javascript:;">{{ order.orderId }}</a></div>
                          <span>成交时间：{{ order.flishTime|dateFormat }}</span>
                          <!--    <em>店铺：小桔灯</em>-->
                        </div>
                        <div class="order-content">
                          <div class="order-left">
                            <template v-for="orderItem in order.orderItems">
                              <ul class="item-list">
                                <li class="td td-item">
                                  <div class="item-pic">
                                    <a href="#" class="J_MakePoint">
                                      <img :src="orderItem.productImg" class="itempic J_ItemImg">
                                    </a>
                                  </div>
                                  <div class="item-info">
                                    <div class="item-basic-info">
                                      <a href="#">
                                        <p>{{ orderItem.productName }}</p>
                                        <p class="info-little">{{ orderItem.skuName }}
                                          <!--<br/>包装：裸装--> </p>
                                      </a>
                                    </div>
                                  </div>
                                </li>
                                <li class="td td-price">
                                  <div class="item-price">
                                    {{ orderItem.productPrice }}
                                  </div>
                                </li>
                                <li class="td td-number">
                                  <div class="item-number">
                                    <span>×</span>{{ orderItem.buyCounts }}
                                  </div>
                                </li>
                                <li class="td td-operation">
                                  <div class="item-operation">
                                    <a href="javascript:void(0)" v-if="order.status==2">退款</a>
                                  </div>
                                </li>
                              </ul>
                            </template>
                          </div>
                          <div class="order-right">
                            <li class="td td-amount">
                              <div class="item-amount">
                                合计：{{ order.totalAmount }}
                                <p>含运费：<span>包邮</span></p>
                              </div>
                            </li>
                            <div class="move-right">
                              <li class="td td-status">
                                <div class="item-status">
                                  <!--订单状态 1:待付款 2:待发货 3:待收货 4:待评价 5:已完成 6:已关闭-->
                                  <!--交易成功-->
                                  <p class="Mystatus" v-if="order.status == 5">交易成功</p>
                                  <p class="Mystatus" v-if="order.status == 2">买家已付款</p>
                                  <p class="Mystatus" v-if="order.status == 3">卖家已发货</p>
                                  <p class="Mystatus" v-if="order.status == 1">等待买家付款</p>
                                  <p class="Mystatus" v-if="order.status == 1"><a href="javascript:void(0)">取消订单</a></p>
                                  <p class="order-info"><a href="orderinfo.html" v-if="order.status == 3">订单详情</a></p>
                                  <p class="order-info"><a href="javascript:void(0)" v-if="order.status == 3">查看物流</a>
                                  </p>
                                  <!--交易关闭-->
                                  <p class="Mystatus" v-if="order.status ==6">交易关闭</p>

                                </div>
                              </li>
                              <li class="td td-change">

                                <div class="am-btn am-btn-danger anniu" v-if="order.status ==1" @click="goPay(order)">
                                  一键支付
                                </div>
                                <div class="am-btn am-btn-danger anniu" v-if="order.status ==2">
                                  提醒发货
                                </div>
                                <div class="am-btn am-btn-danger anniu" v-if="order.status ==3">
                                  确认收货
                                </div>
                                <div class="am-btn am-btn-danger anniu" v-if="order.status ==4"
                                     @click="goComment(orders)">
                                  评价商品
                                </div>
                                <div class="am-btn am-btn-danger anniu" v-if="order.status==6" @click="delOrder(order)">
                                  删除订单
                                </div>

                              </li>
                            </div>
                          </div>
                        </div>
                      </div>
                    </template>
                  </div>

                </div>

              </div>
              <div class="am-tab-panel am-fade" id="tab2">

                <div class="order-top">
                  <div class="th th-item">
                    <td class="td-inner">商品</td>
                  </div>
                  <div class="th th-price">
                    <td class="td-inner">单价</td>
                  </div>
                  <div class="th th-number">
                    <td class="td-inner">数量</td>
                  </div>
                  <div class="th th-operation">
                    <td class="td-inner">商品操作</td>
                  </div>
                  <div class="th th-amount">
                    <td class="td-inner">合计</td>
                  </div>
                  <div class="th th-status">
                    <td class="td-inner">交易状态</td>
                  </div>
                  <div class="th th-change">
                    <td class="td-inner">交易操作</td>
                  </div>
                </div>

                <div class="order-main">
                  <div class="order-list">
                    <div class="order-status1">
                      <div class="order-title">
                        <div class="dd-num">订单编号：<a href="javascript:;">1601430</a></div>
                        <span>成交时间：2015-12-20</span>
                        <!--    <em>店铺：小桔灯</em>-->
                      </div>
                      <div class="order-content">
                        <div class="order-left">
                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/kouhong.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>美康粉黛醉美唇膏 持久保湿滋润防水不掉色</p>
                                    <p class="info-little">颜色：12#川南玛瑙
                                      <br/>包装：裸装 </p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">

                              </div>
                            </li>
                          </ul>

                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/62988.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>礼盒袜子女秋冬 纯棉袜加厚 韩国可爱 </p>
                                    <p class="info-little">颜色分类：李清照
                                      <br/>尺码：均码</p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">

                              </div>
                            </li>
                          </ul>

                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/kouhong.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>美康粉黛醉美唇膏 持久保湿滋润防水不掉色</p>
                                    <p class="info-little">颜色：12#川南玛瑙
                                      <br/>包装：裸装 </p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">

                              </div>
                            </li>
                          </ul>
                        </div>
                        <div class="order-right">
                          <li class="td td-amount">
                            <div class="item-amount">
                              合计：676.00
                              <p>含运费：<span>10.00</span></p>
                            </div>
                          </li>
                          <div class="move-right">
                            <li class="td td-status">
                              <div class="item-status">
                                <p class="Mystatus">等待买家付款</p>
                                <p class="order-info"><a href="#">取消订单</a></p>

                              </div>
                            </li>
                            <li class="td td-change">
                              <a href="pay.html">
                                <div class="am-btn am-btn-danger anniu" @click="goPay(order)">
                                  一键支付
                                </div>
                              </a>
                            </li>
                          </div>
                        </div>

                      </div>
                    </div>
                  </div>

                </div>
              </div>
              <div class="am-tab-panel am-fade" id="tab3">
                <div class="order-top">
                  <div class="th th-item">
                    <td class="td-inner">商品</td>
                  </div>
                  <div class="th th-price">
                    <td class="td-inner">单价</td>
                  </div>
                  <div class="th th-number">
                    <td class="td-inner">数量</td>
                  </div>
                  <div class="th th-operation">
                    <td class="td-inner">商品操作</td>
                  </div>
                  <div class="th th-amount">
                    <td class="td-inner">合计</td>
                  </div>
                  <div class="th th-status">
                    <td class="td-inner">交易状态</td>
                  </div>
                  <div class="th th-change">
                    <td class="td-inner">交易操作</td>
                  </div>
                </div>

                <div class="order-main">
                  <div class="order-list">
                    <div class="order-status2">
                      <div class="order-title">
                        <div class="dd-num">订单编号：<a href="javascript:;">1601430</a></div>
                        <span>成交时间：2015-12-20</span>
                        <!--    <em>店铺：小桔灯</em>-->
                      </div>
                      <div class="order-content">
                        <div class="order-left">
                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/kouhong.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>美康粉黛醉美唇膏 持久保湿滋润防水不掉色</p>
                                    <p class="info-little">颜色：12#川南玛瑙
                                      <br/>包装：裸装 </p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">
                                <a href="refund.html">退款</a>
                              </div>
                            </li>
                          </ul>

                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/62988.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>礼盒袜子女秋冬 纯棉袜加厚 韩国可爱 </p>
                                    <p class="info-little">颜色分类：李清照
                                      <br/>尺码：均码</p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">
                                <a href="refund.html">退款</a>
                              </div>
                            </li>
                          </ul>

                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/kouhong.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>美康粉黛醉美唇膏 持久保湿滋润防水不掉色</p>
                                    <p class="info-little">颜色：12#川南玛瑙
                                      <br/>包装：裸装 </p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">
                                <a href="refund.html">退款</a>
                              </div>
                            </li>
                          </ul>
                        </div>
                        <div class="order-right">
                          <li class="td td-amount">
                            <div class="item-amount">
                              合计：676.00
                              <p>含运费：<span>10.00</span></p>
                            </div>
                          </li>
                          <div class="move-right">
                            <li class="td td-status">
                              <div class="item-status">
                                <p class="Mystatus">买家已付款</p>
                                <p class="order-info"><a href="orderinfo.html">订单详情</a></p>
                              </div>
                            </li>
                            <li class="td td-change">
                              <div class="am-btn am-btn-danger anniu">
                                提醒发货
                              </div>
                            </li>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="am-tab-panel am-fade" id="tab4">
                <div class="order-top">
                  <div class="th th-item">
                    <td class="td-inner">商品</td>
                  </div>
                  <div class="th th-price">
                    <td class="td-inner">单价</td>
                  </div>
                  <div class="th th-number">
                    <td class="td-inner">数量</td>
                  </div>
                  <div class="th th-operation">
                    <td class="td-inner">商品操作</td>
                  </div>
                  <div class="th th-amount">
                    <td class="td-inner">合计</td>
                  </div>
                  <div class="th th-status">
                    <td class="td-inner">交易状态</td>
                  </div>
                  <div class="th th-change">
                    <td class="td-inner">交易操作</td>
                  </div>
                </div>

                <div class="order-main">
                  <div class="order-list">
                    <div class="order-status3">
                      <div class="order-title">
                        <div class="dd-num">订单编号：<a href="javascript:;">1601430</a></div>
                        <span>成交时间：2015-12-20</span>
                        <!--    <em>店铺：小桔灯</em>-->
                      </div>
                      <div class="order-content">
                        <div class="order-left">
                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/kouhong.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>美康粉黛醉美唇膏 持久保湿滋润防水不掉色</p>
                                    <p class="info-little">颜色：12#川南玛瑙
                                      <br/>包装：裸装 </p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">
                                <a href="refund.html">退款/退货</a>
                              </div>
                            </li>
                          </ul>

                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/62988.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>礼盒袜子女秋冬 纯棉袜加厚 韩国可爱 </p>
                                    <p class="info-little">颜色分类：李清照
                                      <br/>尺码：均码</p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">
                                <a href="refund.html">退款/退货</a>
                              </div>
                            </li>
                          </ul>

                        </div>
                        <div class="order-right">
                          <li class="td td-amount">
                            <div class="item-amount">
                              合计：676.00
                              <p>含运费：<span>10.00</span></p>
                            </div>
                          </li>
                          <div class="move-right">
                            <li class="td td-status">
                              <div class="item-status">
                                <p class="Mystatus">卖家已发货</p>
                                <p class="order-info"><a href="orderinfo.html">订单详情</a></p>
                                <p class="order-info"><a href="logistics.html">查看物流</a></p>
                                <p class="order-info"><a href="#">延长收货</a></p>
                              </div>
                            </li>
                            <li class="td td-change">
                              <div class="am-btn am-btn-danger anniu">
                                确认收货
                              </div>
                            </li>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="am-tab-panel am-fade" id="tab5">
                <div class="order-top">
                  <div class="th th-item">
                    <td class="td-inner">商品</td>
                  </div>
                  <div class="th th-price">
                    <td class="td-inner">单价</td>
                  </div>
                  <div class="th th-number">
                    <td class="td-inner">数量</td>
                  </div>
                  <div class="th th-operation">
                    <td class="td-inner">商品操作</td>
                  </div>
                  <div class="th th-amount">
                    <td class="td-inner">合计</td>
                  </div>
                  <div class="th th-status">
                    <td class="td-inner">交易状态</td>
                  </div>
                  <div class="th th-change">
                    <td class="td-inner">交易操作</td>
                  </div>
                </div>

                <div class="order-main">
                  <div class="order-list">
                    <!--不同状态的订单	-->
                    <div class="order-status4">
                      <div class="order-title">
                        <div class="dd-num">订单编号：<a href="javascript:;">1601430</a></div>
                        <span>成交时间：2015-12-20</span>

                      </div>
                      <div class="order-content">
                        <div class="order-left">
                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/kouhong.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>美康粉黛醉美唇膏 持久保湿滋润防水不掉色</p>
                                    <p class="info-little">颜色：12#川南玛瑙
                                      <br/>包装：裸装 </p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">
                                <a href="refund.html">退款/退货</a>
                              </div>
                            </li>
                          </ul>

                        </div>
                        <div class="order-right">
                          <li class="td td-amount">
                            <div class="item-amount">
                              合计：676.00
                              <p>含运费：<span>10.00</span></p>
                            </div>
                          </li>
                          <div class="move-right">
                            <li class="td td-status">
                              <div class="item-status">
                                <p class="Mystatus">交易成功</p>
                                <p class="order-info"><a href="orderinfo.html">订单详情</a></p>
                                <p class="order-info"><a href="logistics.html">查看物流</a></p>
                              </div>
                            </li>
                            <li class="td td-change">
                              <a href="commentlist.html">
                                <div class="am-btn am-btn-danger anniu">
                                  评价商品
                                </div>
                              </a>
                            </li>
                          </div>
                        </div>
                      </div>
                    </div>


                    <div class="order-status4">
                      <div class="order-title">
                        <div class="dd-num">订单编号：<a href="javascript:;">1601430</a></div>
                        <span>成交时间：2015-12-20</span>
                        <!--    <em>店铺：小桔灯</em>-->
                      </div>
                      <div class="order-content">
                        <div class="order-left">
                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/kouhong.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>美康粉黛醉美唇膏 持久保湿滋润防水不掉色</p>
                                    <p class="info-little">颜色：12#川南玛瑙
                                      <br/>包装：裸装 </p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">
                                <a href="refund.html">退款/退货</a>
                              </div>
                            </li>
                          </ul>

                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/62988.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>礼盒袜子女秋冬 纯棉袜加厚 韩国可爱 </p>
                                    <p class="info-little">颜色分类：李清照
                                      <br/>尺码：均码</p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">
                                <a href="refund.html">退款/退货</a>
                              </div>
                            </li>
                          </ul>

                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/kouhong.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>美康粉黛醉美唇膏 持久保湿滋润防水不掉色</p>
                                    <p class="info-little">颜色：12#川南玛瑙
                                      <br/>包装：裸装 </p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">
                                <a href="refund.html">退款/退货</a>
                              </div>
                            </li>
                          </ul>


                        </div>
                        <div class="order-right">
                          <li class="td td-amount">
                            <div class="item-amount">
                              合计：676.00
                              <p>含运费：<span>10.00</span></p>
                            </div>
                          </li>
                          <div class="move-right">
                            <li class="td td-status">
                              <div class="item-status">
                                <p class="Mystatus">交易成功</p>
                                <p class="order-info"><a href="orderinfo.html">订单详情</a></p>
                                <p class="order-info"><a href="logistics.html">查看物流</a></p>
                              </div>
                            </li>
                            <li class="td td-change">
                              <a href="commentlist.html">
                                <div class="am-btn am-btn-danger anniu">
                                  评价商品
                                </div>
                              </a>
                            </li>
                          </div>
                        </div>
                      </div>
                    </div>


                  </div>

                </div>

              </div>
            </div>
            <!--分页 -->
            <template v-if="orders.length!=0">
              <el-pagination class="am-pagination am-pagination-centered"
                             background
                             layout="prev, pager, next"
                             :total="count"
                             :page-size="pageSize"
                             @next-click="next" @prev-click="prev" @current-change="pager">
              </el-pagination>
            </template>
          </el-tab-pane>
          <el-tab-pane label="待评价" name="fifth">
            <div class="am-tabs-bd">
              <div class="am-tab-panel am-fade am-in am-active" id="tab1">
                <div class="order-top">
                  <div class="th th-item">
                    <td class="td-inner">商品</td>
                  </div>
                  <div class="th th-price">
                    <td class="td-inner">单价</td>
                  </div>
                  <div class="th th-number">
                    <td class="td-inner">数量</td>
                  </div>
                  <div class="th th-operation">
                    <td class="td-inner">商品操作</td>
                  </div>
                  <div class="th th-amount">
                    <td class="td-inner">合计</td>
                  </div>
                  <div class="th th-status">
                    <td class="td-inner">交易状态</td>
                  </div>
                  <div class="th th-change">
                    <td class="td-inner">交易操作</td>
                  </div>
                </div>

                <div class="order-main">
                  <div class="order-list">

                    <!--交易成功-->
                    <template v-for="order in orders">
                      <div class="order-status5">
                        <div class="order-title">
                          <div class="dd-num" style="max-width: 700px;width: 40%">订单编号：<a
                              href="javascript:;">{{ order.orderId }}</a></div>
                          <span>成交时间：{{ order.flishTime|dateFormat }}</span>
                          <!--    <em>店铺：小桔灯</em>-->
                        </div>
                        <div class="order-content">
                          <div class="order-left">
                            <template v-for="orderItem in order.orderItems">
                              <ul class="item-list">
                                <li class="td td-item">
                                  <div class="item-pic">
                                    <a href="#" class="J_MakePoint">
                                      <img :src="orderItem.productImg" class="itempic J_ItemImg">
                                    </a>
                                  </div>
                                  <div class="item-info">
                                    <div class="item-basic-info">
                                      <a href="#">
                                        <p>{{ orderItem.productName }}</p>
                                        <p class="info-little">{{ orderItem.skuName }}
                                          <!--<br/>包装：裸装--> </p>
                                      </a>
                                    </div>
                                  </div>
                                </li>
                                <li class="td td-price">
                                  <div class="item-price">
                                    {{ orderItem.productPrice }}
                                  </div>
                                </li>
                                <li class="td td-number">
                                  <div class="item-number">
                                    <span>×</span>{{ orderItem.buyCounts }}
                                  </div>
                                </li>
                                <li class="td td-operation">
                                  <div class="item-operation">
                                    <a href="javascript:void(0)" v-if="order.status==2">退款</a>
                                  </div>
                                </li>
                              </ul>
                            </template>
                          </div>
                          <div class="order-right">
                            <li class="td td-amount">
                              <div class="item-amount">
                                合计：{{ order.totalAmount }}
                                <p>含运费：<span>包邮</span></p>
                              </div>
                            </li>
                            <div class="move-right">
                              <li class="td td-status">
                                <div class="item-status">
                                  <!--订单状态 1:待付款 2:待发货 3:待收货 4:待评价 5:已完成 6:已关闭-->
                                  <!--交易成功-->
                                  <p class="Mystatus" v-if="order.status == 5">交易成功</p>
                                  <p class="Mystatus" v-if="order.status == 2">买家已付款</p>
                                  <p class="Mystatus" v-if="order.status == 3">卖家已发货</p>
                                  <p class="Mystatus" v-if="order.status == 1">等待买家付款</p>
                                  <p class="Mystatus" v-if="order.status == 1"><a href="javascript:void(0)">取消订单</a></p>
                                  <p class="order-info"><a href="orderinfo.html" v-if="order.status == 3">订单详情</a></p>
                                  <p class="order-info"><a href="javascript:void(0)" v-if="order.status == 3">查看物流</a>
                                  </p>
                                  <!--交易关闭-->
                                  <p class="Mystatus" v-if="order.status ==6">交易关闭</p>

                                </div>
                              </li>
                              <li class="td td-change">

                                <div class="am-btn am-btn-danger anniu" v-if="order.status ==1" @click="goPay(order)">
                                  一键支付
                                </div>
                                <div class="am-btn am-btn-danger anniu" v-if="order.status ==2">
                                  提醒发货
                                </div>
                                <div class="am-btn am-btn-danger anniu" v-if="order.status ==3">
                                  确认收货
                                </div>
                                <div class="am-btn am-btn-danger anniu" v-if="order.status ==4"
                                     @click="goComment(orders)">
                                  评价商品
                                </div>
                                <div class="am-btn am-btn-danger anniu" v-if="order.status==6" @click="delOrder(order)">
                                  删除订单
                                </div>

                              </li>
                            </div>
                          </div>
                        </div>
                      </div>
                    </template>
                  </div>

                </div>

              </div>
              <div class="am-tab-panel am-fade" id="tab2">

                <div class="order-top">
                  <div class="th th-item">
                    <td class="td-inner">商品</td>
                  </div>
                  <div class="th th-price">
                    <td class="td-inner">单价</td>
                  </div>
                  <div class="th th-number">
                    <td class="td-inner">数量</td>
                  </div>
                  <div class="th th-operation">
                    <td class="td-inner">商品操作</td>
                  </div>
                  <div class="th th-amount">
                    <td class="td-inner">合计</td>
                  </div>
                  <div class="th th-status">
                    <td class="td-inner">交易状态</td>
                  </div>
                  <div class="th th-change">
                    <td class="td-inner">交易操作</td>
                  </div>
                </div>

                <div class="order-main">
                  <div class="order-list">
                    <div class="order-status1">
                      <div class="order-title">
                        <div class="dd-num">订单编号：<a href="javascript:;">1601430</a></div>
                        <span>成交时间：2015-12-20</span>
                        <!--    <em>店铺：小桔灯</em>-->
                      </div>
                      <div class="order-content">
                        <div class="order-left">
                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/kouhong.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>美康粉黛醉美唇膏 持久保湿滋润防水不掉色</p>
                                    <p class="info-little">颜色：12#川南玛瑙
                                      <br/>包装：裸装 </p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">

                              </div>
                            </li>
                          </ul>

                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/62988.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>礼盒袜子女秋冬 纯棉袜加厚 韩国可爱 </p>
                                    <p class="info-little">颜色分类：李清照
                                      <br/>尺码：均码</p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">

                              </div>
                            </li>
                          </ul>

                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/kouhong.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>美康粉黛醉美唇膏 持久保湿滋润防水不掉色</p>
                                    <p class="info-little">颜色：12#川南玛瑙
                                      <br/>包装：裸装 </p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">

                              </div>
                            </li>
                          </ul>
                        </div>
                        <div class="order-right">
                          <li class="td td-amount">
                            <div class="item-amount">
                              合计：676.00
                              <p>含运费：<span>10.00</span></p>
                            </div>
                          </li>
                          <div class="move-right">
                            <li class="td td-status">
                              <div class="item-status">
                                <p class="Mystatus">等待买家付款</p>
                                <p class="order-info"><a href="#">取消订单</a></p>

                              </div>
                            </li>
                            <li class="td td-change">
                              <a href="pay.html">
                                <div class="am-btn am-btn-danger anniu" @click="goPay(order)">
                                  一键支付
                                </div>
                              </a>
                            </li>
                          </div>
                        </div>

                      </div>
                    </div>
                  </div>

                </div>
              </div>
              <div class="am-tab-panel am-fade" id="tab3">
                <div class="order-top">
                  <div class="th th-item">
                    <td class="td-inner">商品</td>
                  </div>
                  <div class="th th-price">
                    <td class="td-inner">单价</td>
                  </div>
                  <div class="th th-number">
                    <td class="td-inner">数量</td>
                  </div>
                  <div class="th th-operation">
                    <td class="td-inner">商品操作</td>
                  </div>
                  <div class="th th-amount">
                    <td class="td-inner">合计</td>
                  </div>
                  <div class="th th-status">
                    <td class="td-inner">交易状态</td>
                  </div>
                  <div class="th th-change">
                    <td class="td-inner">交易操作</td>
                  </div>
                </div>

                <div class="order-main">
                  <div class="order-list">
                    <div class="order-status2">
                      <div class="order-title">
                        <div class="dd-num">订单编号：<a href="javascript:;">1601430</a></div>
                        <span>成交时间：2015-12-20</span>
                        <!--    <em>店铺：小桔灯</em>-->
                      </div>
                      <div class="order-content">
                        <div class="order-left">
                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/kouhong.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>美康粉黛醉美唇膏 持久保湿滋润防水不掉色</p>
                                    <p class="info-little">颜色：12#川南玛瑙
                                      <br/>包装：裸装 </p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">
                                <a href="refund.html">退款</a>
                              </div>
                            </li>
                          </ul>

                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/62988.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>礼盒袜子女秋冬 纯棉袜加厚 韩国可爱 </p>
                                    <p class="info-little">颜色分类：李清照
                                      <br/>尺码：均码</p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">
                                <a href="refund.html">退款</a>
                              </div>
                            </li>
                          </ul>

                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/kouhong.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>美康粉黛醉美唇膏 持久保湿滋润防水不掉色</p>
                                    <p class="info-little">颜色：12#川南玛瑙
                                      <br/>包装：裸装 </p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">
                                <a href="refund.html">退款</a>
                              </div>
                            </li>
                          </ul>
                        </div>
                        <div class="order-right">
                          <li class="td td-amount">
                            <div class="item-amount">
                              合计：676.00
                              <p>含运费：<span>10.00</span></p>
                            </div>
                          </li>
                          <div class="move-right">
                            <li class="td td-status">
                              <div class="item-status">
                                <p class="Mystatus">买家已付款</p>
                                <p class="order-info"><a href="orderinfo.html">订单详情</a></p>
                              </div>
                            </li>
                            <li class="td td-change">
                              <div class="am-btn am-btn-danger anniu">
                                提醒发货
                              </div>
                            </li>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="am-tab-panel am-fade" id="tab4">
                <div class="order-top">
                  <div class="th th-item">
                    <td class="td-inner">商品</td>
                  </div>
                  <div class="th th-price">
                    <td class="td-inner">单价</td>
                  </div>
                  <div class="th th-number">
                    <td class="td-inner">数量</td>
                  </div>
                  <div class="th th-operation">
                    <td class="td-inner">商品操作</td>
                  </div>
                  <div class="th th-amount">
                    <td class="td-inner">合计</td>
                  </div>
                  <div class="th th-status">
                    <td class="td-inner">交易状态</td>
                  </div>
                  <div class="th th-change">
                    <td class="td-inner">交易操作</td>
                  </div>
                </div>

                <div class="order-main">
                  <div class="order-list">
                    <div class="order-status3">
                      <div class="order-title">
                        <div class="dd-num">订单编号：<a href="javascript:;">1601430</a></div>
                        <span>成交时间：2015-12-20</span>
                        <!--    <em>店铺：小桔灯</em>-->
                      </div>
                      <div class="order-content">
                        <div class="order-left">
                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/kouhong.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>美康粉黛醉美唇膏 持久保湿滋润防水不掉色</p>
                                    <p class="info-little">颜色：12#川南玛瑙
                                      <br/>包装：裸装 </p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">
                                <a href="refund.html">退款/退货</a>
                              </div>
                            </li>
                          </ul>

                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/62988.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>礼盒袜子女秋冬 纯棉袜加厚 韩国可爱 </p>
                                    <p class="info-little">颜色分类：李清照
                                      <br/>尺码：均码</p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">
                                <a href="refund.html">退款/退货</a>
                              </div>
                            </li>
                          </ul>

                        </div>
                        <div class="order-right">
                          <li class="td td-amount">
                            <div class="item-amount">
                              合计：676.00
                              <p>含运费：<span>10.00</span></p>
                            </div>
                          </li>
                          <div class="move-right">
                            <li class="td td-status">
                              <div class="item-status">
                                <p class="Mystatus">卖家已发货</p>
                                <p class="order-info"><a href="orderinfo.html">订单详情</a></p>
                                <p class="order-info"><a href="logistics.html">查看物流</a></p>
                                <p class="order-info"><a href="#">延长收货</a></p>
                              </div>
                            </li>
                            <li class="td td-change">
                              <div class="am-btn am-btn-danger anniu">
                                确认收货
                              </div>
                            </li>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="am-tab-panel am-fade" id="tab5">
                <div class="order-top">
                  <div class="th th-item">
                    <td class="td-inner">商品</td>
                  </div>
                  <div class="th th-price">
                    <td class="td-inner">单价</td>
                  </div>
                  <div class="th th-number">
                    <td class="td-inner">数量</td>
                  </div>
                  <div class="th th-operation">
                    <td class="td-inner">商品操作</td>
                  </div>
                  <div class="th th-amount">
                    <td class="td-inner">合计</td>
                  </div>
                  <div class="th th-status">
                    <td class="td-inner">交易状态</td>
                  </div>
                  <div class="th th-change">
                    <td class="td-inner">交易操作</td>
                  </div>
                </div>

                <div class="order-main">
                  <div class="order-list">
                    <!--不同状态的订单	-->
                    <div class="order-status4">
                      <div class="order-title">
                        <div class="dd-num">订单编号：<a href="javascript:;">1601430</a></div>
                        <span>成交时间：2015-12-20</span>

                      </div>
                      <div class="order-content">
                        <div class="order-left">
                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/kouhong.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>美康粉黛醉美唇膏 持久保湿滋润防水不掉色</p>
                                    <p class="info-little">颜色：12#川南玛瑙
                                      <br/>包装：裸装 </p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">
                                <a href="refund.html">退款/退货</a>
                              </div>
                            </li>
                          </ul>

                        </div>
                        <div class="order-right">
                          <li class="td td-amount">
                            <div class="item-amount">
                              合计：676.00
                              <p>含运费：<span>10.00</span></p>
                            </div>
                          </li>
                          <div class="move-right">
                            <li class="td td-status">
                              <div class="item-status">
                                <p class="Mystatus">交易成功</p>
                                <p class="order-info"><a href="orderinfo.html">订单详情</a></p>
                                <p class="order-info"><a href="logistics.html">查看物流</a></p>
                              </div>
                            </li>
                            <li class="td td-change">
                              <a href="commentlist.html">
                                <div class="am-btn am-btn-danger anniu">
                                  评价商品
                                </div>
                              </a>
                            </li>
                          </div>
                        </div>
                      </div>
                    </div>


                    <div class="order-status4">
                      <div class="order-title">
                        <div class="dd-num">订单编号：<a href="javascript:;">1601430</a></div>
                        <span>成交时间：2015-12-20</span>
                        <!--    <em>店铺：小桔灯</em>-->
                      </div>
                      <div class="order-content">
                        <div class="order-left">
                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/kouhong.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>美康粉黛醉美唇膏 持久保湿滋润防水不掉色</p>
                                    <p class="info-little">颜色：12#川南玛瑙
                                      <br/>包装：裸装 </p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">
                                <a href="refund.html">退款/退货</a>
                              </div>
                            </li>
                          </ul>

                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/62988.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>礼盒袜子女秋冬 纯棉袜加厚 韩国可爱 </p>
                                    <p class="info-little">颜色分类：李清照
                                      <br/>尺码：均码</p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">
                                <a href="refund.html">退款/退货</a>
                              </div>
                            </li>
                          </ul>

                          <ul class="item-list">
                            <li class="td td-item">
                              <div class="item-pic">
                                <a href="#" class="J_MakePoint">
                                  <img src="@/assets/images/kouhong.jpg_80x80.jpg" class="itempic J_ItemImg">
                                </a>
                              </div>
                              <div class="item-info">
                                <div class="item-basic-info">
                                  <a href="#">
                                    <p>美康粉黛醉美唇膏 持久保湿滋润防水不掉色</p>
                                    <p class="info-little">颜色：12#川南玛瑙
                                      <br/>包装：裸装 </p>
                                  </a>
                                </div>
                              </div>
                            </li>
                            <li class="td td-price">
                              <div class="item-price">
                                333.00
                              </div>
                            </li>
                            <li class="td td-number">
                              <div class="item-number">
                                <span>×</span>2
                              </div>
                            </li>
                            <li class="td td-operation">
                              <div class="item-operation">
                                <a href="refund.html">退款/退货</a>
                              </div>
                            </li>
                          </ul>


                        </div>
                        <div class="order-right">
                          <li class="td td-amount">
                            <div class="item-amount">
                              合计：676.00
                              <p>含运费：<span>10.00</span></p>
                            </div>
                          </li>
                          <div class="move-right">
                            <li class="td td-status">
                              <div class="item-status">
                                <p class="Mystatus">交易成功</p>
                                <p class="order-info"><a href="orderinfo.html">订单详情</a></p>
                                <p class="order-info"><a href="logistics.html">查看物流</a></p>
                              </div>
                            </li>
                            <li class="td td-change">
                              <a href="commentlist.html">
                                <div class="am-btn am-btn-danger anniu">
                                  评价商品
                                </div>
                              </a>
                            </li>
                          </div>
                        </div>
                      </div>
                    </div>


                  </div>

                </div>

              </div>
            </div>
            <!--分页 -->
            <template v-if="orders.length!=0">
              <el-pagination class="am-pagination am-pagination-centered"
                             background
                             layout="prev, pager, next"
                             :total="count"
                             :page-size="pageSize"
                             @next-click="next" @prev-click="prev" @current-change="pager">
              </el-pagination>
            </template>
          </el-tab-pane>
        </el-tabs>
      </template>
    </div>
  </div>
</template>

<script>
import {deleteOrder, getOrders} from "@/api/person";
import Moment from "moment";

export default {
  name: "PersonOrder",
  data() {
    return {
      activeName: 'first',
      pageNum: 1,
      pageSize: 5,
      userId: 0,
      status: '',
      orders: [],
      count: 0

    }
  },
  filters: {
    dateFormat(date) {
      return Moment(date).format('YYYY年MM月DD日 HH:mm:ss')
    }
  },
  created() {
    this.$emit('changeIndex', 4);
    this.activeName = this.$route.query.activeName;
    switch (this.activeName) {
      case 'first':
        this.status = '';
        break;
      case 'second':
        this.status = '1';
        break;
      case 'third':
        this.status = '2';
        break;
      case 'fourth':
        this.status = '3';
        break;
      case 'fifth':
        this.status = '4';
        break;
      default:
        this.status = '';
    }
    this.username = this.$store.state.account;
    this.userId = this.$store.state.id;
    this.getAllOrders();
  },
  methods: {
    prev() {
      if (this.pageNum > 1) {
        this.pageNum--;
      }
    },
    pager(event) {
      this.pageNum = event;
      this.getAllOrders();
    },
    next() {
      if (this.pageNum < this.pageCount) {
        this.pageNum++;
      }
    },
    getAllOrders() {
      getOrders(this.userId, this.status, this.pageNum, this.pageSize).then(data => {
        const res = data.data;
        if (res.success) {
          this.orders = res.data.list;
          this.count = res.data.count;
          console.log(this.orders.length)
        }

      }).catch(error => {
        this.$message({
          message: error,
          type: 'error'
        })
      })
    },
    handleClick(tab, event) {
      switch (tab.index) {
        case '1':
          this.status = '1'
          break;
        case '2':
          this.status = '2'
          break;
        case '3':
          this.status = '3'
          break;
        case '4':
          this.status = '4'
          break;
        default:
          this.status = '';
      }
      this.getAllOrders();
    },
    goPay(order) {
      var orderInfo = {};
      orderInfo.orderId = order.orderId;
      orderInfo.productName = order.untitled;
      orderInfo.totalPrice = order.totalAmount;
      orderInfo.receiverName = order.receiverName;
      orderInfo.receiverMobile = order.receiverMobile;
      orderInfo.receiverAddress = order.receiverAddress;
      console.log(213213 + JSON.stringify(orderInfo))
      this.$router.push({
        path: '/pay',
        query: {
          orderInfo: JSON.stringify(orderInfo)
        }
      })
    },
    delOrder(order) {
      this.$confirm('确定删除该订单吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteOrder(order.orderId).then(data => {
          const res = data.data;
          if (res.success) {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.getAllOrders();
          } else {
            this.$message({
              message: res.msg,
              type: 'error'
            })
          }
        }).catch(error => {
          this.$message({
            message: error,
            type: 'error'
          })
        })


      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    goComment(orders) {
      this.$router.push({
        path: '/comment',
        query: {
          orders: JSON.stringify(orders)
        }
      })


    }
  }
}
</script>

<style scoped>
td {
  display: inline-block;
}
</style>